DAY 9 LINE Bot 進階互動功能(上篇)

2022 iThome 鐵人賽

DAY 9

自我挑戰組

30天建構出一個簡單 LineBot 機器人系列第 9 篇

14th鐵人賽

Lumeowmo

2022-09-23 21:03:49

2050 瀏覽

分享至

今天要跟大家介紹的是Line Bot進階的互動功能-「樣板訊息 template message」，回應訊息若只有文字、圖片等較為無法吸引使用者目光；而LINE Bot可以使用樣版組合多種回應訊息，並且內建四種樣版：按鈕樣版、確認樣版、轉盤樣版、圖片轉盤樣版，讓頁面更加多樣化，也大幅提升使用者互動的彈性。

1. 按鈕樣版

按鈕樣版是回應樣版訊息中最常使用的樣版，可結合圖片、文字以及按鈕，並讓使用者點選按鈕後做適當的回應處理。

基本語法

buttons_template_message = TemplateSendMessage(
    alt_text = 取代文字,
    template = ButtonsTemplate(
        thumbnail_image_url = 圖片網址,
        title = 標題文字,
        text = 說明文字,
        actions = [
            按鈕元件1,
            按鈕元件2,
            ......
        ]
    )
)

TemplateSendMessage：回應樣版訊息的訊息命令
alt_text：在不支援樣版訊息的裝置，顯示此替代文字
template=ButtonsTemplate：使用按鈕樣板
actions：是一個串列，串列元素為按鈕。
每個按鈕樣板最多可以有四個按鈕，即actions最多有四個元素。
按鈕樣板中的按鈕元件有四種：文字訊息、連結按鈕、回傳按鈕、時間按鈕。

按鈕元件

文字訊息

例如：按鈕文字為「文字訊息」，回傳文字為「@購買披薩」

MessageTemplateAction(
    label = '文字訊息',
    text = '@購買披薩'
)

根據回傳值「@購買披薩」做後續適當的回應處理

if mtext == '@購買披薩':
    message = TextSendMessage(
        text = '感謝您的購買，我們盡快為您製作',
    )
    line_bot_api.reply_message(event.reply_token,message)

連結按鈕

例如：按鈕文字為「連結網頁」，點選後開啟GOOGLE首頁

URITemplateAction(
    label = '連結網頁',
    uri = 'https://www.google.com.tw/?hl=zh_TW'
),

回傳按鈕

回傳按鈕除了可以回傳文字訊息外,還可以回傳一個Postback資料
例如：按鈕文字為「回傳訊息」，Postback資料為「action=buy」

PostbackTemplateAction(
    label = '回傳訊息',
    data = 'action=buy'
),

使用點選回傳按鈕會觸發Postback事件，後續動作必須在Postback事件中處理

if isinstance(event, PostbackEvent):
    backdata = dict(parse_qsl(event.postback.data))
    if backdata.get('action') == 'buy':
        message = TextSendMessage(
            text = '感謝您的購買，我們盡快為您製作',
    )
    line_bot_api.reply_message(event.reply_token,message)

練習程式

def sendButton(event):
    try:
        message = TemplateSendMessage(
            alt_text = '按鈕樣板',
            template = ButtonsTemplate(
                thumbnail_image_url='https://i.imgur.com/pRdaAmS.jpg',
                title='按鈕樣板範例',
                text='請選擇：',
                actions=[
                    MessageTemplateAction(
                        label='文字訊息',
                        text='@購買披薩'
                    ),
                    URITemplateAction(
                        label='連結網頁',
                        uri='https://www.grazie.com.tw/menu#food=1&meal=1'
                    ),
                    PostbackTemplateAction(
                        label='回傳訊息',
                        data='action=buy'
                    ),
                ]
            )
        )
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))


def sendPizza(event):
    try:
        message = TextSendMessage(
            text = '感謝您的購買，我們盡快為您製作',
        )
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

def sendBack_buy(event, backdata):
    try:
        text1 = '感謝您的購買，我們盡快為您製作。(action 的值為' + backdata.get('action') + ')'

        message = TextSendMessage(
            text = text1
        )
        
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

首先先至 Line Office Account Manager 建立圖文選單以方便樣板訊息的測試，若不太清楚圖文選單可參考DAY5的貼人賽文章哦，以下測試畫面中連結網頁的部分即為開啟連結就先省略範例示圖~

2. 確認樣版

確認樣版為顯示確認、取消訊息的確認按鈕，讓使用者可以再次確認操作，以免在重要時刻不小心點選錯誤按鈕造成重大損失

基本語法

confirm_template_message = TemplateSendMessage(
    alt_text = 取代文字,
    template = ConfirmTemplate(
        text = 提示文字,
        actions = [
            按鈕元件1,
            按鈕元件2,
            ......
        ]
    )
)

文字訊息、連結按鈕、回傳按鈕三種按鈕就可使用，大部分以文字訊息居多

練習程式

def sendConfirm(event):
    try:
        message = TemplateSendMessage(
            alt_text = '按鈕樣板',
            template = ConfirmTemplate(
                text='確認是否購買這項產品？',
                actions=[
                    MessageTemplateAction(
                        label='是',
                        text='@yes'
                    ),
                    MessageTemplateAction(
                        label='否',
                        text='@no'
                    )
                ]
            )
        )
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

def sendYes(event):
    try:
        message = TextSendMessage(
            text = '感謝您的購買，\n我們會盡快寄出商品',
        )
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

3. 轉盤樣版

轉盤樣版是多個按鈕樣版的結合，以並排的方式，使用者滑動按鈕樣版即可選擇不同按鈕樣版

基本語法

carousel_template_message = TemplateSendMessage(
    alt_text = 取代文字,
    template = CarouselTemplate(
        columns=[
            CarouselColumn(
            #按鈕樣板一
            thumbnail_image_url = 圖片網址,
            title = 標題文字,
            text = 說明文字,
            actions = [
                按鈕元件1,
                按鈕元件2,
                ......
            ]
        ),
            CarouselColumn(
               按鈕樣板二
            ),
            ......
        ]
    )
)

練習程式

def sendCarousel(event):
    try:
        message = TemplateSendMessage(
            alt_text = '轉盤樣板',
            template = CarouselTemplate(
                columns = [
                    CarouselColumn(
                        thumbnail_image_url='https://i.imgur.com/pRdaAmS.jpg',
                        title='PIZZA 樣板',
                        text='PIZZA 轉盤樣板',
                        actions=[
                            MessageTemplateAction(
                                label='選擇披薩',
                                text='選擇披薩'
                            ),
                            URITemplateAction(
                                label='連結披薩菜單網頁',
                           uri='https://www.grazie.com.tw/'
                            ),
                            PostbackTemplateAction(
                                label='PIZZA 回傳訊息',
                                data='action=sell&item=披薩'
                            ),
                        ]
                    ),
                    CarouselColumn(
                        thumbnail_image_url='https://i.imgur.com/MyLoA5d.jpg',
                        title='DRINK 樣板',
                        text='DRINK 轉盤樣板二',
                        actions=[
                            MessageTemplateAction(
                                label='選擇飲料',
                                text='選擇飲料'
                            ),
                            URITemplateAction(
                                label='連結飲料菜單網頁',
                                uri='https://www.facebook.com/'
                            ),
                            PostbackTemplateAction(
                                label='DRINK 回傳訊息',
                                data='action=sell&item=飲料'
                            ),
                        ]
                    )
                ]
            )
        )
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

先點選設定好的圖文選單-轉盤樣版，而後依序點選按鈕